import React from 'react'
import { Wrapper } from './style'
import {Course} from '@/models/courseType'
interface CourseItemProps{
    courseData:Course
}

const CourseItem:React.FC<CourseItemProps> = (props) => {
    const {courseData}=props;
    // console.log(courseData);
    return (
        <Wrapper>
            <div className="course_img_wrapper">
                <img className='course_img' src={courseData.picture} alt="" />
            </div>
            <div className="desc_wrapper">
                <div className="desc_top">
                    <div className="title">{courseData.title}</div>
                    <div className="time">{courseData.desc}</div>
                </div>
                <div className="desc_botoom">
                    {
                        // 一般的text
                        courseData.bottomDesc.plainText &&
                        <div className="desc_text">{courseData.bottomDesc.plainText}</div>
                    }
                    {
                        // 中等的label
                        courseData.bottomDesc.mediumLabel && courseData.bottomDesc.mediumLabel.text &&
                        <div className="desc_label">{courseData.bottomDesc.mediumLabel.text}</div>
                    }
                    
                </div>
            </div>
        </Wrapper>
    )
}

export default CourseItem
